<template>
  <div class="container">
    <div class="safeinfo-container">
      <div class="li real-name leading-8">
        <div class="name-state">
          <div class="state">
            实名认证
            <span
              class="statespan"
              :class="{ active: this.realNameInfo.stateInfo.state == 1 }"
              >{{ realNameInfo.stateInfo.title }}</span
            >
          </div>
          <div
            class="set name pr-4"
            @click="
              realNameInfo.realNameDialogVisible =
                true && realNameInfo.stateInfo.state == 0
            "
            :class="{ active: this.realNameInfo.stateInfo.state == 1 }"
          >
            {{ realNameInfo.stateInfo.name }}
          </div>
        </div>
        <el-dialog
          title="实名认证"
          :visible.sync="realNameInfo.realNameDialogVisible"
          :before-close="handleCloserealName"
        >
          <el-form
            ref="setRealform"
            :rules="rules"
            :model="realNameInfo.form"
            label-width="0px"
          >
            <el-form-item label="" prop="realName">
              <span>姓名</span>
              <el-input v-model="realNameInfo.form.realName"></el-input>
            </el-form-item>
            <el-form-item label="" prop="realNameInfo">
              <span>身份证号</span>
              <el-input v-model="realNameInfo.form.realNameInfo"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="realResetForm('setRealform')">取 消</el-button>
            <el-button type="primary" @click="sumbitRealForm('setRealform')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div class="li real-name leading-8">
        <div class="name-state">
          <div class="state">账户密码更改</div>
          <div class="set pr-4" @click="pwdInfoDialogVisible = true">修改</div>
        </div>
        <el-dialog
          title="账户密码修改"
          :visible.sync="pwdInfoDialogVisible"
          :before-close="handleClosePasswordInfo"
        >
          <el-form
            ref="setPwdForm"
            :rules="rules"
            :model="pwdInfoForm"
            label-width="0px"
          >
            <el-form-item label="" prop="oldPassword">
              <span>旧密码</span>
              <el-input
                v-model="pwdInfoForm.oldPassword"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="newPassword">
              <span>新密码</span>
              <el-input
                v-model="pwdInfoForm.newPassword"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item
              label=""
              v-model="pwdInfoForm.newPassword"
              prop="checkPassword"
            >
              <span>确认密码</span>
              <el-input
                v-model="pwdInfoForm.checkPassword"
                show-password
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('setPwdForm')">取 消</el-button>
            <el-button type="primary" @click="sumbitForm('setPwdForm')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {},
  data() {
    var validateRealName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("信息不能为空"));
      } else {
        callback();
      }
    };
    var validateRealInfo = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("信息不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value != this.pwdInfoForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateOldPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        this.$taxios
          .postInfo("/checkoutPassword", { password: value })
          .then((res) => {
            if (res.state) {
              callback();
            } else {
              callback(new Error("旧密码错误"));
            }
          });
      }
    };
    return {
      realNameInfo: {
        stateInfo: {
          state: 1,
          title: "",
          name: " ",
        },
        realNameDialogVisible: false,
        form: {
          realName: "",
          realNameInfo: "",
        },
      },
      //安全信息
      pwdInfoDialogVisible: false,
      pwdInfoForm: {
        oldPassword: "",
        newPassword: "",
        checkPassword: "",
      },
      rules: {
        realName: [
          {
            validator: validateRealName,
            required: true,
            message: "请输入实名信息",
            trigger: "blur",
          },
        ],
        realNameInfo: [
          {
            validator: validateRealInfo,
            required: true,
            message: "请输入实名信息",
            trigger: "blur",
          },
        ],
        oldPassword: [{ validator: validateOldPwd, trigger: "blur" }],
        newPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 8, message: "长度最少为8个字符", trigger: "blur" },
        ],
        checkPassword: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  created() {
    if (sessionStorage.getItem("token")) {
      this.getUserInfo();
    }
  },
  methods: {
    sumbit() {
      this.$store.commit("updateMessage", this.$refs.nameinput.value);
    },
    getUserInfo() {
      console.log(this.$cookies.get("token"));
      this.$taxios
        .postInfo("/getUserInfo", { token: this.$cookies.get("token") })
        .then((res) => {
          console.log(res);
          let user = res.userInfo;
          console.log(user);
          if (user.realName == null || user.realName == "") {
            this.realNameInfo.stateInfo.state = 0;
            this.realNameInfo.stateInfo.title = "未实名";
            this.realNameInfo.stateInfo.name = "提交实名";
            console.log(user.realName);
          } else {
            this.realNameInfo.stateInfo.state = 1;
            this.realNameInfo.stateInfo.title = "已实名";
            this.realNameInfo.stateInfo.name = "*" + user.realName.substr(1);
          }
        });
    },
    //弹窗关闭
    handleCloserealName(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$refs["setRealform"].resetFields();
          done();
        })
        .catch((_) => {});
    },
    handleClosePasswordInfo(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$refs["setPwdForm"].resetFields();
          done();
        })
        .catch((_) => {});
    },
    //实名认证表单
    sumbitRealForm(pwdForm) {
      this.$refs[pwdForm].validate((valid) => {
        if (valid) {
          this.realNameInfo.realNameDialogVisible = false;
          this.$taxios
            .postInfo("/updateUserInfo", {
              realName: this.realNameInfo.form.realName,
              realNameInfo: this.realNameInfo.form.realNameInfo,
            })
            .then((res) => {
              console.log(res.userInfo);
              let user = res.userInfo;
              this.$message.promptBox("提交成功", "success");
              location.reload();
            });
          this.resetForm(pwdForm);
        } else {
          console.log("error.submit!!");
          return false;
        }
      });
    },
    realResetForm(pwdForm) {
      this.realNameInfo.realNameDialogVisible = false;
      this.$refs[pwdForm].resetFields();
    },
    //修改密码表单提交
    sumbitForm(pwdForm) {
      console.log(this.$refs[pwdForm].validate);
      this.$refs[pwdForm].validate((valid) => {
        if (valid) {
          this.pwdInfoDialogVisible = false;
          console.log(this.pwdInfoForm);
          this.$taxios
            .postInfo("/updateUserInfo", {
              password: this.pwdInfoForm.newPassword,
            })
            .then((res) => {
              console.log(res.userInfo);
              let user = res.userInfo;
              console.log(res);
              if (res.state == 1) {
                this.$message.promptBox("修改成功请重新登录", "success");
                this.$router.push("/home");
                this.$store.commit("logout");
              }
              // location.reload()
            });
          this.resetForm(pwdForm);
        } else {
          console.log("error.submit!!");
          this.$message.promptBox("修改失败", "error");

          return false;
        }
      });
    },
    resetForm(pwdForm) {
      this.pwdInfoDialogVisible = false;
      this.$refs[pwdForm].resetFields();
    },
  },
};
</script>
<style  lang="less" scoped>
.container {
  .safeinfo-container {
    display: block;

    .li {
      width: 100%;
      min-height: 40px;
      border-bottom: 1px solid rgba(128, 128, 128, 0.5);
      // display: flex;
      padding-top: 20px;
      padding-bottom: 0px;
    }

    .real-name {
      position: realtive;
      flex-shrink: 0;
      width: 100%;

      .name-state {
        width: 100%;
        display: flex;
        align-items: center;
        // justify-content: center;
        justify-content: space-between;

        .state {
          text-align: left;
          // width: 80%;
          padding-left: 15px;
          box-sizing: border-box;

          .statespan {
            font-size: 10px;
            padding: 3px;
            background: rgba(255, 0, 0, 0.3);
            border: 1px solid red;
          }

          .statespan.active {
            background: #2469e550;
            border: 1px solid #2469e5;
          }
        }

        .set {
          width: auto;
          color: #2469e5;
          cursor: pointer;
        }

        .name {
          color: rgba(255, 0, 0, 0.6);
        }

        .name.active {
          cursor: default;
          color: rgba(128, 128, 128, 0.5);
        }
      }

      .el-dialog__wrapper {
        /deep/ .el-dialog {
          width: 400px;

          .el-form-item {
            text-align: left;

            span {
              // text-align: left;
            }
          }

          .el-input__icon {
            width: auto;
          }
        }
      }

      .dialog-footer {
        .el-button {
          color: black;
        }

        .el-button:hover {
          background: #409eff;
        }
      }
    }
  }
}
</style>